import React from 'react'
import { Table, Card, Tag, Progress, Divider, Typography, TableProps } from 'antd'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

const { Title, Text } = Typography

interface MetaPathResultsProps {
  results: {
    predictions: Array<{
      source: string
      target: string
      score: number
      meta_path?: string
    }>
    pathCounts: Record<string, number>
    parameters: Record<string, any>
  }
}

const MetaPathResults: React.FC<MetaPathResultsProps> = ({ results }) => {
  const { predictions, pathCounts } = results
  
  // 准备元路径统计数据
  const pathCountData = Object.entries(pathCounts).map(([path, count]) => ({
    name: path,
    count: count
  }))
  
  // 表格列定义
  const columns = [
    {
      title: '源节点',
      dataIndex: 'source',
      key: 'source',
    },
    {
      title: '目标节点',
      dataIndex: 'target',
      key: 'target',
    },
    {
      title: '预测分数',
      dataIndex: 'score',
      key: 'score',
      render: (score: number) => (
        <div>
          <Progress 
            percent={Math.round(score * 100)} 
            size="small" 
            status="active" 
            strokeColor={{ from: '#108ee9', to: '#87d068' }}
          />
          <Text>{(score * 100).toFixed(2)}%</Text>
        </div>
      ),
      sorter: (a: any, b: any) => a.score - b.score,
      defaultSortOrder: 'descend' as const
    },
    {
      title: '元路径',
      dataIndex: 'meta_path',
      key: 'meta_path',
      render: (path?: string) => path ? <Tag color="blue">{path}</Tag> : '-'
    }
  ]
  
  return (
    <div className="meta-path-results">
      <Title level={3}>链接预测结果</Title>
      
      <Card title="预测链接" style={{ marginBottom: 20 }}>
        <Table 
          dataSource={predictions.map((item, index) => ({ ...item, key: index }))} 
          columns={columns} 
          pagination={{ pageSize: 10 }}
        />
      </Card>
      
      {pathCountData.length > 0 && (
        <Card title="元路径统计" style={{ marginBottom: 20 }}>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart
              data={pathCountData}
              margin={{ top: 20, right: 30, left: 20, bottom: 70 }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis 
                dataKey="name" 
                angle={-45} 
                textAnchor="end"
                height={70}
              />
              <YAxis />
              <Tooltip />
              <Bar dataKey="count" fill="#8884d8" />
            </BarChart>
          </ResponsiveContainer>
        </Card>
      )}
      
      <Divider />
      
      <Card title="算法参数">
        <Table
          dataSource={Object.entries(results.parameters).map(([key, value], index) => ({
            key: index,
            parameter: key,
            value: typeof value === 'object' ? JSON.stringify(value) : value.toString()
          }))}
          columns={[
            { title: '参数', dataIndex: 'parameter', key: 'parameter' },
            { title: '值', dataIndex: 'value', key: 'value' }
          ]}
          pagination={false}
        />
      </Card>
    </div>
  )
}

export default MetaPathResults 